<template>
  <!-- 关联请求 -->
  <div v-loading="loading">
    <ProTable
      ref="proTable"
      :columns="columns"
      :data="list"
      row-key="requestCode"
      :tool-button="false"
      :pagination="false"
      :height="list.length == 0 ? 200 : list.length < 9 ? '' : 400"
    >
    </ProTable>
  </div>
</template>

<script setup lang="ts" name="AssociationRequestBox">
import { ref, computed, onMounted, watch } from "vue";

import ProTable from "@/components/ProTable/index.vue";
import { ProTableInstance } from "@/components/ProTable/interface";

import { getChangeRelatedRequest } from "@/api/modules/changeManagement";
import { findProblemRelatedRequest } from "@/api/modules/problemManagement";

import { findRequests } from "@/api/modules/assetManagement";

import { useUserStore } from "@/stores/modules/user";
const userStore = useUserStore();

// 表格配置项
const columns = computed(() => {
  let list = ref<any[]>([]);
  if (props.eno) {
    list.value = [
      { prop: "requestCode", label: "编号", width: 162 },
      { prop: "etitle", label: "标题" },
      { prop: "ecategoryName", label: "分类", width: 128 },
      { prop: "createdByName", label: "请求人", width: 128 },
      { prop: "assigneeName", label: "指派到技术员", width: 128 },
      { prop: "priorityName", label: "优先级", width: 100 },
      { prop: "statusName", label: "状态", width: 100 },
      { prop: "createdOn", label: "创建时间", width: 166 }
    ];
  } else if (props.ciId) {
    list.value = [
      { prop: "eno", label: "ID", width: 120 },
      { prop: "etitle", label: "标题" },
      { prop: "createdByName", label: "请求人", width: 130 },
      { prop: "statusName", label: "状态", width: 125 },
      { prop: "createdOn", label: "创建时间", width: 175 }
    ];
  }
  return list.value;
});

const props = defineProps({
  eno: Number || String,
  ciId: Number || String,
  pno: Number || String
});

// ProTable 实例
const proTable = ref<ProTableInstance>();
const list = ref<any[]>([]);
const loading = ref(true);

const getList = () => {
  if (props.pno) {
    //问题
    findProblemRelatedRequest({
      eno: props.pno,
      _search: false,
      sidx: "eno",
      sord: "desc",
      page: 1,
      rows: 20
    })
      .then((res: any) => {
        loading.value = false;
        list.value = res.data || [];
      })
      .catch(() => {
        loading.value = false;
      });
  }
  if (props.eno) {
    // 请求、变更、问题
    getChangeRelatedRequest({
      eno: props.eno,
      _search: false,
      sidx: "eno",
      sord: "desc",
      page: 1,
      rows: 20
    })
      .then((res: any) => {
        loading.value = false;
        list.value = res.data || [];
      })
      .catch(() => {
        loading.value = false;
      });
  }
  if (props.ciId) {
    // 资产
    let txt = `requestQueryDTO.CiId=${props.ciId}&requestQueryDTO.currentUser=${userStore.username}&requestQueryDTO.lastUpdater=${userStore.username}`;
    findRequests(txt, {
      _search: false,
      nd: new Date().getTime(),
      sidx: "eno",
      sord: "desc",
      page: 1,
      rows: 20
    })
      .then((res: any) => {
        console.log(res);
        loading.value = false;
        list.value = res.data || [];
      })
      .catch(() => {
        loading.value = false;
      });
  }
};

onMounted(() => {
  getList();
});

watch(
  () => props.eno,
  () => {
    list.value = [];
    getList();
  }
);

watch(
  () => props.ciId,
  () => {
    list.value = [];
    getList();
  }
);
</script>

<style lang="scss" scoped>
:deep(.card) {
  padding: 0;
  border: none;
}
</style>
